<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div id="clock"></div>
    <script>
      const clock = document.getElementById("clock");
      setInterval(() => {
        const d = new Date();
        let h = d.getHours();
        let m = d.getMinutes();
        let s = d.getSeconds();
        const str = `${h < 10 ? "0" + h : h}:${m < 10 ? "0" + m : m}:${
          s < 10 ? "0" + s : s
        }`;
        const strArr = [...str].map((el) => {
          if (el === ":") {
            return `<img src="./imgs/dot.png"/>`;
          } else {
            return `<img src="./imgs/countdown${el}.png"/>`;
          }
        });
        clock.innerHTML = strArr.join("");
      }, 1000);
    </script>
  </body>
</html>
